<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="新闻标题" prop="title">
        <el-input
            v-model="queryParams.title"
            placeholder="请输入新闻标题"
            clearable
            @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="新闻分类" prop="type">
        <el-select v-model="queryParams.type" placeholder="请选择新闻分类" clearable style="width: 200px">
          <el-option
              v-for="dict in news_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="20" class="news-container">
      <el-col
          v-for="(item, index) in newsList"
          :key="index"
          :xs="24" :sm="12" :md="8" :lg="6"
          class="news-item"
      >
        <el-card
            shadow="hover"
            class="news-card"
            @click="handleView(item.newsId)"
        >
          <div class="cover-box">
            <img
                :src="item.coverImage || 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'"
                class="cover-image"
            />
          </div>
          <div class="content-box">
            <h3 class="title">{{ item.title }}</h3>

            <div class="meta-info">
              <dict-tag :options="news_type" :value="item.type"/>
              <span class="time">{{ item.createTime }}</span>
            </div>

            <div class="summary">
              {{ item.summary || '暂无内容摘要' }}
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

  </div>
</template>

<script setup name="News">
import {listNews} from "@/api/news/news";
import {ref, onMounted, toRefs, getCurrentInstance} from "vue";
import DictTag from "@/components/DictTag/index.vue";

const {proxy} = getCurrentInstance();
const {news_type} = proxy.useDict('news_type');

const newsList = ref([]);

const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: null,
    type: null,
  },
});
const {queryParams} = toRefs(data);

/** 查询心理健康新闻快讯列表 */
function getList() {
  loading.value = true;
  listNews(queryParams.value).then(response => {
    newsList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

const handleView = (newsId) => {
  console.log("点击了新闻",newsId)
  // 跳转到详情页面
  proxy.$router.push({
    path: '/newsDetail',
    query: {
      newsId: newsId
    }
  })
}

onMounted(() => {
  getList();
})
</script>

<style lang="scss" scoped>
@mixin text-ellipsis($lines) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-container {
  margin-top: 20px;
}

.news-card {
  margin-bottom: 20px;
  transition: transform 0.3s;
  cursor: pointer;

  &:hover {
    transform: translateY(-5px);
  }
}

.cover-box {
  height: 180px;
  overflow: hidden;
  border-radius: 4px;

  .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.1);
    }
  }
}

.content-box {
  padding: 15px 10px 10px;

  .title {
    font-size: 16px;
    margin: 0 0 12px;
    color: #333;
    @include text-ellipsis(2);
  }

  .meta-info {
    @include flex-between;
    margin-bottom: 10px;

    .time {
      font-size: 12px;
      color: #999;
    }
  }

  .summary {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    @include text-ellipsis(3);
  }
}

.pagination-box {
  margin-top: 30px;
  justify-content: center;
}
</style>
